<template>
	<view>
		<Sheader :title="'用户管理'"/>
		<view class="content-view">
			<view class="user-top__view-login">
				<view class="user-login__left">
					<text>服务者账号: {{userInfo.idNo || ''}}</text>
					<br/>
					<text>账号到期时间: {{userInfo.createDate || ''}}</text>
					<br/>
					<text>状态：</text><view class="status-box" :style="{'background': status[0].bg, 'color': status[0].color}">因欠费停止接单</view>
				</view>
				<u-image width="88rpx" height="88rpx" :src="user"></u-image>
			</view>
			<u-cell-group>
				<u-cell-item :icon="dh" title="服务热线" value="028-85054888" :arrow="false"></u-cell-item>
				<u-cell-item :icon="v.image" :title="v.name" :arrow="true" v-for="(v, i) in itemsList" :key="i"  @click="itemClick(v)" /></u-cell-item>
				<u-cell-item :icon="sx" title="检查更新" :arrow="false" @click="checkEdition"></u-cell-item>
				<u-cell-item :icon="ds" title="清除缓存" :arrow="false" @click="clearLocal"></u-cell-item>
				<u-cell-item :icon="ss" title="密码修改" :arrow="true" @click="$utils.gotoPage('../user/resolvePasswordV')"></u-cell-item>
				<u-cell-item :icon="gth" title="关于我们" :arrow="true"></u-cell-item>
				<view class="sub-btn check-btn">关闭推广，停止接单</view>
				<view class="sub-btn out-btn" @click="outLogin">退出当前账户</view>
				
			</u-cell-group>
			<view class="user-info">
				<view class="user-info__box">
					用户须知：<br/><br/>
					
					1、本软件分《用户》和《服务者》两种人群注册；<br/>
					2、用户是指享受该软件服务的网友客户，注册为用户不能为他人提供服务；用户终身免费使用；若你要发布司机招聘信息，只能以用户身份注册；<br/>
					3、服务者是为客户提供上门服务的工作人员。服务者为用户提供各种技术服务。若你要发布车辆出租或房屋出租信息，只能以服务者身份注册登陆后才能完成。<br/>
					4、本系统只能是个人对个人的服务；系统只支持个人注册，不支持单位（企业）注册。<br/>
					5、以服务者身份注册的网友具有两种角色；既是服务者也是用户；若你已经在服务者里面注册成功，则不需要再在用户里面重复注册，若你已经在用户里面注册，但你愿意给网友提供上门服务，那么还可以在服务者里面再次注册成为服务提供者；
				</view>
			</view>
			<view class="user-bottom">
				上门服务网：www.shangmenfuwu.cc
			</view>
		</view>
		<u-modal v-model="showTip" :content="content" :title="title" @confirm="confirm" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	import Sheader from '@/components/Sheader/index.vue'
	import user from '@/static/user-img.png'
	import dh from '@/static/dh.png'
	import gwb from '@/static/gwb.png'
	import wjj from '@/static/wjj.png'
	import tp from '@/static/tp.png'
	import ws from '@/static/ws.png'
	import qc from '@/static/qc.png'
	import fw from '@/static/fw.png'
	import cz1 from '@/static/cz1.png'
	import cz2 from '@/static/cz2.png'
	import bz from '@/static/bz.png'
	import qb from '@/static/qb.png'
	import fx from '@/static/fx.png'
	import xx from '@/static/xx.png'
	import sx from '@/static/sx.png'
	import th from '@/static/th.png'
	import ds from '@/static/ds.png'
	import ss from '@/static/ss.png'
	import gth from '@/static/gth.png'

	export default {
		data() {
			return {
				user: user,
				gwb,
				wjj,
				tp,
				ws,
				qc,
				dh,
				sx,
				ds,
				ss,
				gth,
				xx,
				fx,
				qb,
				bz,
				cz1,
				cz2,
				fw,
				gth,
				showTip: false,
				title: '提示',
				content: '确定要清除所有缓存吗',
				userInfo: {},
				timer: null,
				status: [
					{
						bg: '#FA3534',
						color: '#fff'
					},
					{
						bg: '#FF9900',
						color: '#fff'
					},
					{
						bg: '#F4F4F5',
						color: '#82848A'
					},
					{
						bg: '#19BE6B',
						color: '#fff'
					}
				],
				itemsList: [
					{
						name: '我的资料',
						gotopage: './vUserInfo',
						image: gwb
					},
					{
						name: '上传图片',
						gotopage: '',
						image: wjj
					},
					{
						name: '上门服务',
						gotopage: '',
						image: tp
					},
					{
						name: '司机求职',
						gotopage: '',
						image: ws
					},
					{
						name: '车辆出租',
						gotopage: '',
						image: qc
					},
					{
						name: '房屋出租',
						gotopage: '',
						image: fw
					},
					{
						name: '开通车辆大数据查询',
						gotopage: '',
						clickFn: 'checkInfo',
						image: cz2
					},
					{
						name: '车辆大数据查询记录',
						gotopage: './dataSearch',
						clickFn: 'checkInfo',
						image: cz1
					},
					{
						name: '我的订单',
						gotopage: '',
						image: bz
					},
					{
						name: '账户充值',
						gotopage: '',
						image: qb
					},
					{
						name: '邀请朋友',
						gotopage: '',
						image: fx
					},
					{
						name: '我的收藏',
						gotopage: '',
						image: xx
					}
				]
			}
		},
		components: {
			Sheader
		},
		mounted() {
			this.userInfo = uni.getStorageSync("fw_viterInfo")
		},
		onLoad() {
		},
		onUnload() {
			clearTimeout(this.timer)
			this.timer = null
		},
		methods: {
			itemClick(v) {
					console.log(v.clickFn)
				if (v.clickFn) {
					this[v.clickFn](v)
				} else {
					this.$utils.gotoPage(v.gotopage)
				}
			},
			checkEdition() {
				this.showTip = true
				this.title = '检查版本'
				this.content = '没有检查到最新版本'
				return false
			},
			clearLocal() {
				this.showTip = true
				this.title = '清楚缓存'
				this.content = '确定要清除所有缓存吗?'
				return false
			},
			outLogin() {
				this.showTip = true
				this.title = '退出登录'
				this.content = '确定要退出上门服务吗?'
			},
			confirm() {
				if (this.title == '退出登录') {
					this.$emit('loginOut')
					this.$http.setToken(null, 1)
					this.$http.setUserType(0)
					uni.setStorageSync("fw_viterInfo", {})
				} else if (this.title == '清楚缓存') {
					this.timer = setTimeout(() => {
						clearTimeout(this.timer)
						this.timer = null
						uni.showToast({
							icon: 'success',
							title: '清除缓存成功',
							duration: 3000
						})
					}, 1200)
				}
			},
			checkInfo(v) {
				const vm = this
				this.$utils.gotoPage('./vinSearch')
				return
				vm.$http.request('/queryPayMoney/isOpenQuery', {}, 'get', true, false, {'Content-Type': 'application/json'}).then((res) => {
					if (!res.success) {
						this.$utils.gotoPage('./openSearchPay?title=开通车架号查询&type=payMoney')
						return
					} else {
						if (v.gotoPage) {
							this.$utils.gotoPage(v.gotoPage)
						} else {
							uni.showToast({
								icon: 'success',
								title: '已开通车架号查询',
								duration: 3000
							})
						}
						return
					}
				})
			}
		}
	}
</script>

<style>
	.content-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: #F8F8F8;
		padding-top: 90rpx;
		height: 100vh;
		overflow: auto;
	}
	.user-img {
		margin: auto;
		margin-bottom: 24rpx;
	}
	.user-top__view-login {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #2979FF;
		padding: 36rpx 40rpx 34rpx;
		width: 100%;
	}
	.user-login__left {
		text-align: left;
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 48rpx;
		color: #FFFFFF;
		opacity: 1;		
	}
	.user-top__view {
		text-align: center;
		background-color: #2979FF;
		padding-top: 36rpx;
		width: 100%;
	}
	.user-top__text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #FFFFFF;
		opacity: 1;
		margin-bottom: 16rpx;
	}
	.user-top_btns {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 36rpx;
	}
	.user-btn {
		padding: 16rpx 72rpx;
		color: #fff;
		border-radius: 8rpx;
		border: 2rpx solid #fff;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #FFFFFF;
		opacity: 1;
	}
	.user-top_login {
		margin-left: 20rpx;
		background-color: #fff;
		color: #2979FF;
	}
	.user-info {
		padding: 30rpx;
		background-color: #fff;
	}
	.user-info__box {
		padding: 24rpx 20rpx;
		border: 1px solid #C0C4CC;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #303133;
		opacity: 1;		
	}
	.user-bottom {
		padding: 18rpx;
		text-align: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 32rpx;
		color: #82848A;
		opacity: 1;
	}
	/deep/ .uicon-phone-fill {
		color: #2979FF;
	}
	/deep/ .uicon-reload {
		color: #6FF40A;
	}
	/deep/ .uicon-trash-fill {
		color: #EBED8B;
	}
	/deep/ .uicon-info-circle-fill {
		color: #2979FF;
	}
	.sub-btn {
		width: 670rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #FFFFFF;
		border: 1px solid #C0C4CC;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #303133;
		opacity: 1;
		margin: 30rpx auto 0;
	}
	.check-btn {
		color: #fff;
		background: #FA3534;
	}
	.out-btn {
		background: #2979FF;
		color: #fff;
	}
	.status-box {
		display: inline-block;
		width: 200rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background: #FA3534;
		opacity: 1;
		border-radius: 100px;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;		
	}
</style>
